@keyframes around{
    0% {
      transform: translateX(0);
    }
    25%{
      transform: translateX(180px);
    }
    50%{
       transform: translate(180px, 180px); 
    }
    75%{
      transform:translate(0,180px);
    }
    100%{
      transform: translateY(0);
    }
  }
  div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 20px auto;
  }
  div span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: orange;
    border-radius: 100%;
   animation:around;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count:infinite;
  }
  @keyframes changeColor {
    from {
      background: red;
    }
    to {
      background:green;
    }
  }
  .d {
    width: 200px;
    height: 200px;
    background: red;
    text-align:center;
    margin: 20px auto;
    line-height: 200px;
    color: #fff;
    animation-play-state:paused;
  }
  .d:hover {
    animation-name: changeColor;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    animation-delay: .1s;
    animation-play-state:running
    
  }
  /*animation-timing-function:ease | linear
   | ease-in | ease-out | ease-in-out |*/
   @keyframes move {
    0%{
      transform: translate(0);
    }
    15%{
      transform: translate(100px,180px);
    }
    30%{
      transform: translate(150px,0);
    }
    45%{
      transform: translate(250px,180px);
    }
    60%{
      transform:translate(300px,0);
    }
    75%{
      transform: translate(450px,180px);
    }
    100%{
      transfrom: translate(480px,0);
    }
  }
.a {
    width: 500px;
    height: 200px;
    border: 1px solid red;
    margin: 20px auto;
  }
  .a span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: green;
    border-radius: 100%;
    animation-name:move;
    animation-duration: 10s;
    animation-timing-function:ease;
    animation-delay:2s;
    animation-iteration-count:infinite;
  }
  @keyframes redToBlue{
    from{
      background: red;
    }
    20%{
        background:green;
    }
    40%{
        background:lime;
    }
    60%{
        background:yellow;
    }
    to{
      background:blue;
    }
  }
  
  .b {
    width: 200px;
    height: 200px;
    background: red;
    margin: 20px auto;
    animation-name:redToBlue;
    animation-duration: 20s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-fill-mode: none; 
  }
  /*animation-fill-mode: none| forwards|backwards|both; 